"use client"

import React, { useState } from "react";
import {
    Modal,
    ModalContent,
    ModalHeader,
    ModalBody,
    ModalFooter,
    Button,
    Avatar,
    Input,
    Kbd,
    Snippet,
} from "@nextui-org/react";

import { logout } from "@/api/user/logout";
import toast from "react-hot-toast";
import { useRouter } from "next/navigation";
import { rename } from "@/api/user/rename";
import { useAppDispatch } from "@/lib/hooks";
import { updateUserName } from "@/lib/features/login/loginSlice";
import { resetState } from "@/lib/store";

export const MailIcon = (props: React.SVGProps<SVGSVGElement>) => {
    return (
        <svg
            aria-hidden="true"
            fill="none"
            focusable="false"
            height="1em"
            role="presentation"
            viewBox="0 0 24 24"
            width="1em"
            {...props}
        >
            <path
                d="M17 3.5H7C4 3.5 2 5 2 8.5V15.5C2 19 4 20.5 7 20.5H17C20 20.5 22 19 22 15.5V8.5C22 5 20 3.5 17 3.5ZM17.47 9.59L14.34 12.09C13.68 12.62 12.84 12.88 12 12.88C11.16 12.88 10.31 12.62 9.66 12.09L6.53 9.59C6.21 9.33 6.16 8.85 6.41 8.53C6.67 8.21 7.14 8.15 7.46 8.41L10.59 10.91C11.35 11.52 12.64 11.52 13.4 10.91L16.53 8.41C16.85 8.15 17.33 8.2 17.58 8.53C17.84 8.85 17.79 9.33 17.47 9.59Z"
                fill="currentColor"
            />
        </svg>
    );
};

export default function Personal({ username, email, isOpen, onClose }: { username: string, email: string, isOpen: boolean, onClose: () => void }) {


    const router = useRouter()

    const [newName, setNewName] = useState(username)

    const dispatch = useAppDispatch()

    const SaveChanges = () => {
        toast.error("功能暂未开放字段较少，请等待后续更新")
    }

    const exit = async () => {
        const result = await logout()
        // console.log(result);
        if (result.code === 200) {
            toast.success(result.message)
            resetState()
            router.replace("/login")
        } else {
            toast.error("注销时出错，请稍后再试 X……X")
        }
    }

    const changeUsername = (v: string) => {
        setNewName(v)
    }

    const saveNewName = async (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.keyCode === 13 && newName != "") {
            const result = await rename(email, newName)
            if (result.code === 200) {
                toast.success(result.message)
                dispatch(updateUserName(newName))
            } else {
                toast.error(result.message)
            }
        }
    }

    return (
        <>
            <Modal backdrop={"blur"} isDismissable={false} isOpen={isOpen} onClose={onClose} scrollBehavior="inside" placement="center">
                <ModalContent>
                    <>
                        <ModalHeader className="flex flex-col gap-1"><span className="text-white flex items-center"><Avatar radius="full" color="warning" /> <span className="ml-2">
                            <Input onKeyDown={(e) => saveNewName(e)} label={<Kbd keys={["enter"]}>Enter</Kbd>} onValueChange={(v: string) => changeUsername(v)} value={newName} defaultValue={username} size="sm" type="text" variant="underlined" />
                        </span></span></ModalHeader>
                        <ModalBody>
                            <p className="text-white">个人信息</p>

                            <Snippet classNames={{ "pre": "flex items-center justify-between text-white" }} symbol={<MailIcon className="text-white mx-1" />} size="sm">{email}</Snippet>
                        </ModalBody>
                        <ModalFooter>
                            <Button color="danger" variant="light" onPress={() => exit()}>
                                Logout
                            </Button>
                            <Button color="danger" onPress={() => SaveChanges()}>
                                {/* Save Changes */}
                                Unopened
                            </Button>
                        </ModalFooter>
                    </>
                </ModalContent>
            </Modal>
        </>
    );
}

